<script>
import api from '@/api'
import treeUtils from '@/utils/tree'
import { Tree as ATree } from 'ant-design-vue'
import { Descriptions as YsDescriptions } from '@/components/YS'

export default {
  name: 'AdminResourceDetail',
  components: {
    YsDescriptions,
    ATree
  },
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data () {
    const _this = this
    return {
      params: {},
      descriptions: {
        title: '角色详情',
        fields: {
          id: this.__('ID'),
          pid: this.__('上级ID'),
          name: this.__('名称'),
          resources: {
            title: this.__('权限'),
            formatter: (val, row) => {
              const resources = []
              if (row.resources.length === 0) {
                return this.__('无')
              }
              row.resources.forEach((resource) => {
                if (resource.type.toString() === '1') {
                  resource.style = 'clear: both;'
                } else {
                  resource.style = 'padding-top: 4px;float: left;'
                }
                resource.key = resource.id.toString()
                resources.push(resource)
              })

              treeUtils.init(resources)

              const props = {
                checkable: false,
                selectable: false,
                defaultExpandAll: true,
                treeData: treeUtils.getTreeArray(0),
                replaceFields: {
                  children: 'childlist',
                  title: 'title'
                }
              }
              return (<a-tree { ...{ props } } />)
            }
          },
          status_text: this.__('状态'),
          create_time: this.__('创建时间'),
          update_time: this.__('更新时间')
        },
        data () {
          _this.params.id = _this.id || _this.$route.query.id
          return api.admin.role.detail(_this.params).then(response => {
            return Promise.resolve(response.data.data.row)
          }).catch(error => {
            return Promise.reject(error)
          })
        }
      }
    }
  },
  created () {
    this.params.id = this.id || this.$route.query.id
  },
  render () {
    const props = this.descriptions
    return <ys-descriptions { ...{ props } } ></ys-descriptions>
  }
}
</script>
